<template>
  <el-form-item label="定位">
    <el-radio-group v-model="editorForm.position.isDefault" @change="handleDefault">
      <el-radio :label="true">默认</el-radio>
      <el-radio :label="false">自定义</el-radio>
    </el-radio-group>

    <div v-if="!editorForm.position.isDefault" class="custom-next">
      <span class="custom-next-title">位置类型：</span>
      <el-select v-model="editorForm.position.type" @change="handlePositionChange">
        <el-option label="相对定位" value="relative" />
        <el-option label="绝对定位" value="absolute" />
        <el-option label="固定定位" value="fixed" />
      </el-select>
    </div>
    <div v-if="!editorForm.position.isDefault" class="custom-next">
      <div class="padding-setting">
        <div v-if="editorForm.position.hasOwnProperty('top')" class="padding-item p0">
          <span>上：</span>
          <el-input v-model="editorForm.position.topPxValue" placeholder="如1px或1%" @input="updatePosition('top')" />
        </div>
        <div v-if="editorForm.position.hasOwnProperty('right')" class="padding-item p0">
          <span>右：</span>
          <el-input v-model="editorForm.position.rightPxValue" placeholder="如1px或1%" @input="updatePosition('right')" />
        </div>
        <div v-if="editorForm.position.hasOwnProperty('bottom')" class="padding-item p0">
          <span>下：</span>
          <el-input v-model="editorForm.position.bottomPxValue" placeholder="如1px或1%" @input="updatePosition('bottom')" />
        </div>
        <div v-if="editorForm.position.hasOwnProperty('left')" class="padding-item p0">
          <span>左：</span>
          <el-input v-model="editorForm.position.leftPxValue" placeholder="如1px或1%" @input="updatePosition('left')" />
        </div>
      </div>
    </div>
  </el-form-item>
</template>

<script setup>
import { inject, ref, onMounted } from 'vue'
import { pxToRem, checkValue } from '@/utils/tools'

const { editorForm, domList, changeDefault, backUpdate } = inject('commonForm')
const bindDom = ref(new Set())

// 初始化属性和元素对应关系
const initDomMapping = () => {
  const bindKeys = [
    `${editorForm.value._key}.position.type`,
    `${editorForm.value._key}.position.top`,
    `${editorForm.value._key}.position.right`,
    `${editorForm.value._key}.position.bottom`,
    `${editorForm.value._key}.position.left`
  ]
  domList.value.forEach(element => {
    const bindValue = element.getAttribute('_bind')
    bindKeys.forEach(key => {
      if (bindValue.includes(key)) {
        bindDom.value.add(element)
      }
    })
  })
}

const handleDefault = val => {
  if (val) {
    changeDefault('position')
  }
  bindDom.value.forEach(element => {
    Object.hasOwn(editorForm.value.position, 'type') ? (element.style.position = editorForm.value.position.type) : ''
    Object.hasOwn(editorForm.value.position, 'top') ? (element.style.top = editorForm.value.position.top) : ''
    Object.hasOwn(editorForm.value.position, 'right') ? (element.style.right = editorForm.value.position.right) : ''
    Object.hasOwn(editorForm.value.position, 'bottom') ? (element.style.bottom = editorForm.value.position.bottom) : ''
    Object.hasOwn(editorForm.value.position, 'left') ? (element.style.left = editorForm.value.position.left) : ''
  })
  if (bindDom.value.size === 0) {
    backUpdate()
  }
}

const handlePositionChange = () => {
  bindDom.value.forEach(element => {
    element.style.position = editorForm.value.position.type
  })
  if (bindDom.value.size === 0) {
    backUpdate()
  }
}

const updatePosition = property => {
  const value = editorForm.value.position[property + 'PxValue']
  if (!value) {
    bindDom.value.forEach(element => {
      element.style[property] = 0
    })
    return
  }

  let finalValue = value
  const pass = checkValue(value)
  if (pass === 'px') {
    const pxValue = value.split('px')[0]
    finalValue = pxToRem(pxValue)
  }

  editorForm.value.position[property] = finalValue
  bindDom.value.forEach(element => {
    element.style[property] = finalValue
  })

  if (bindDom.value.size === 0) {
    backUpdate()
  }
}

onMounted(() => {
  initDomMapping()
})
</script>

<style lang="scss" scoped>
.custom-next {
  margin-bottom: 10px;
  .custom-next-title {
    font-size: 12px;
    color: #606266;
  }
}
</style>
